@extends('home.base')
@section('title')
    {{$data->title}}
@endsection
@section('content')
<link rel="stylesheet" type="text/css" href="{{asset('static/home/css/slider-pro.min.css')}}" media="screen"/>
@include('home.header')
<div id="app">
    <div class="handtitle">
        <div class="w1200 con">
            <div class="newhouse_tit">
                <h3 class="nowrap">{{$data->title}}</h3>
                <span>[{{$data->regionname}}]</span>
                <span class="btn">{{$data->salestatus}}</span>
            </div>
            <i-button type="warning" @click="seeHouse = true">预约看房</i-button>
        </div>
    </div>
    <div class="position">
        <div class="w1200">
            <Breadcrumb>
                <breadcrumb-item to="/">首页</breadcrumb-item>
                <breadcrumb-item to="/newhouse">楼盘列表</breadcrumb-item>
                <breadcrumb-item>{{$data->title}}</breadcrumb-item>
            </Breadcrumb>
        </div>
    </div>
    <div class="property-detail">
        <div class="w1200 top">
            <div class="left">
                <div id="sliderpro" class="slider-pro">
                    <div class="sp-slides">
                        @if(isset($data->images) && !$data->images == '')
                        @foreach($data->images as $b)
                        <div class="sp-slide">
                            <img class="sp-image" src="/static/home/images/blank.gif"
                                 data-src="{{$b['bigimg']}}"
                            />
                        </div>
                        @endforeach
                        @endif
                    </div>
                    <div class="sp-thumbnails">
                        @if(isset($data->images) && !$data->images == '')
                        @foreach($data->images as $s)
                        <div class="sp-thumbnail">
                            <div class="sp-thumbnail-image-container">
                                <img class="sp-thumbnail-image" src="{{$s['smallimg']}}"/>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="price new">
                    <div class="total">
                        <span class="tit">均价约</span>
                        <span class="num">{{$data->average}}</span>
                        <span class="unit">{{$data->average_unit}}</span>
                    </div>
                </div>
                <div class="tips tese">
                    @foreach($data->featuretxt as $t)
                        <span>{{$t}}</span>
                    @endforeach
                </div>
                <div class="main">
                    <p><span>物业类型</span> {{$data->wyname}}</p>
                    <p><span>开盘时间</span> {{date('Y年m月d日',$data->opentime)}} <span>{{$data->hasopen}}</span></p>
                    <p><span>交房时间</span> 预计{{date('Y年m月',$data->handtime)}} <span>{{$data->hashand}}</span></p>
                    <p><span>预售证号</span> {{$data->presale}}</p>
                    <p><span>开&ensp;发&ensp;商</span> {{$data->developers}}</p>
                    <p>
                        <span>楼盘地址</span> {{$data->address}}&emsp;
                        <a href="/property/map?pos={{$data->map}}&n={{$data->title}}" target="_blank">查看地图</a>
                    </p>
                </div>
                <div class="tel">
                    <span>{{$data->saletel}}</span>
                </div>
            </div>
            <div class="message">
                <Affix>
                <div class="notice" @click="seeHouse = true">
                    <span>预约</span>
                    <span>看房</span>
                </div>
                <div class="consult">
                    <span>在线</span>
                    <span>咨询</span>
                </div>
                </Affix>
            </div>
        </div>
        <div class="detail-con">
{{--            <Affix class="tabs-out">--}}
{{--                <div class="tabs-title w1200">--}}
{{--                    <span class="active">楼盘首页</span>--}}
{{--                    <span>楼盘详情</span>--}}
{{--                    <span>楼盘户型</span>--}}
{{--                    <span>楼盘相册</span>--}}
{{--                    <span>楼盘动态</span>--}}
{{--                    <span>周边设施</span>--}}
{{--                </div>--}}
{{--            </Affix>--}}
            <div class="w1200">
                <div class="pro-desc">
                    <div class="title">
                        <h3>楼盘<span>详情</span></h3>
                    </div>
                    <div class="list">
                        <div class="row">
                            <div class="left">
                                <i>楼盘名称：</i>{{$data->title}}
                            </div>
                            <div class="right">
                                <i>区&emsp;&emsp;域：</i>{{$data->title}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>项目特色：</i>
                                <div class="tips tese">
                                    @foreach($data->featuretxt as $t)
                                        <span>{{$t}}</span>
                                    @endforeach
                                </div>
                            </div>
                            <div class="right">
                                <i>物业类型：</i>{{$data->wytype}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>开&ensp;盘&ensp;价：</i>{{$data->openprice??'暂无'}}
                            </div>
                            <div class="right">
                                <i>均&emsp;&emsp;价：</i>{{$data->average}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>开盘时间：</i>{{date('Y-m-d',$data->opentime)}}
                            </div>
                            <div class="right">
                                <i>交房时间：</i>{{date('Y-m-d',$data->handtime)}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>规划面积：</i>{{$data->ghmianji}}
                            </div>
                            <div class="right">
                                <i>建筑面积：</i>{{$data->mianji}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>总&ensp;栋&ensp;数：</i>{{$data->dnum}}
                            </div>
                            <div class="right">
                                <i>容&ensp;积&ensp;率：</i>{{$data->rongjilv}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>总&ensp;户&ensp;数：</i>{{$data->hnum}}
                            </div>
                            <div class="right">
                                <i>绿&ensp;化&ensp;率：</i>{{$data->lvhua}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>停&ensp;车&ensp;位：</i>{{$data->carnum}}
                            </div>
                            <div class="right">
                                <i>物业公司：</i>{{$data->wycompany}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="left">
                                <i>物&ensp;业&ensp;费：</i>{{$data->propertyfee}}
                            </div>
                            <div class="right">
                                <i>开&ensp;发&ensp;商：</i>{{$data->developers}}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>在售<span>户型</span></h3>
                    </div>
                    <div class="huxing">
                        @if(count($data->apartments))
                            <Tabs value="name1">
                                <tab-pane label="全部 ({{count($data->apartments)}})" name="name1">
                                    <div class="list">
                                    @foreach($data->apartments as $k=>$ap)
                                        <div class="con">
                                            <div class="img">
                                                <img src="{{$ap->images[0]['smallimg']}}" alt="{{$ap->title}}">
                                            </div>
                                            <div class="desc">
                                                <h4>
                                                    {{$ap->title}} {{$ap->room}}室{{$ap->hall}}厅{{$ap->toilet}}卫 建筑面积{{$ap->acreage}}平米 <span>{{$ap->salestatus}}</span>
                                                </h4>
                                                <div class="tip">
                                                    <p>
                                                        建筑面积：<span>{{$ap->acreage}}㎡</span>&emsp;&emsp;
                                                        朝向：<span>{{$ap->attribute->name}}</span>
                                                    </p>
                                                    <p class="price">
                                                        <span>{{$ap->price}}</span>万
                                                    </p>
                                                </div>
                                                @if($ap->feature)
                                                <div class="feature"><span>户型特色：</span>{{$ap->feature}}</div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                    </div>
                                </tab-pane>
                                @foreach($apartment as $k=>$v)
                                <tab-pane label="{{$k}}室 ({{count($v)}})" name="name{{$k}}">
                                    <div class="list">
                                        @foreach($v as $ap)
                                            <div class="con">
                                                <div class="img">
                                                    <img src="{{$ap->images[0]['smallimg']}}" alt="{{$ap->title}}">
                                                </div>
                                                <div class="desc">
                                                    <h4>
                                                        {{$ap->title}} {{$ap->room}}室{{$ap->hall}}厅{{$ap->toilet}}卫 建筑面积{{$ap->acreage}}平米 <span>{{$ap->salestatus}}</span>
                                                    </h4>
                                                    <div class="tip">
                                                        <p>
                                                            建筑面积：<span>{{$ap->acreage}}㎡</span>&emsp;&emsp;
                                                            朝向：<span>{{$ap->attribute->name}}</span>
                                                        </p>
                                                        <p class="price">
                                                            <span>{{$ap->price}}</span>万
                                                        </p>
                                                    </div>
                                                    @if($ap->feature)
                                                        <div class="feature"><span>户型特色：</span>{{$ap->feature}}</div>
                                                    @endif
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </tab-pane>
                                @endforeach
                            </Tabs>
                        @endif
                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>楼盘<span>相册</span></h3>
                    </div>
                    <div class="huxing xiangce">
                        @if(count($albums))
                            <Tabs value="name{{$first}}">
                                @foreach($albums as $k=>$album)
                                <tab-pane label="{{$album->category->name}}" name="name{{$k}}">
                                    <div class="list">
                                    @foreach($album->images as $a)
                                    <a href="" class="con">
                                        <div class="img">
                                            <img src="{{$a['smallimg']}}" alt="">
                                        </div>
                                    </a>
                                    @endforeach
                                    </div>
                                </tab-pane>
                                @endforeach
                            </Tabs>

                        @endif
                    </div>
                </div>
                <div class="news">
                    <div class="pro-desc">
                        <div class="title">
                            <h3>楼盘<span>动态</span></h3>
                        </div>
                        <div class="dongtai">
                            @if($data->articles)
                            @foreach($data->articles as $k=>$ar)
                                @if($k<3)
                            <div class="wrap-con">
                                <div class="category">
                                    <span>{{$ar->category->name}}</span>
                                </div>
                                <div class="con">
                                    <div class="title">
                                        <span class="tit">{{$ar->title}}</span>
                                        <span class="time">{{$ar->created_at->format('Y年m月d日')}}</span>
                                    </div>
                                    <div class="desc">{{$ar->description}}<a href="/article/{{$ar->id}}">【详情】</a></div>
                                </div>
                            </div>
                                @endif
                            @endforeach
                            @endif
                        </div>
                    </div>
                    <div class="right">
                        <h3>
                            订阅<span>动态</span>
                        </h3>
                        <div class="sel">
                            <div class="con">
                                <Icon type="ios-checkmark-circle"></Icon>
                                <span>动态提醒</span>
                            </div>
                            <div class="con">
                                <Icon type="ios-checkmark-circle"></Icon>
                                <span>优惠通知</span>
                            </div>
                        </div>
                        <div class="input">
                            <i-input v-model="mobile" size="large" placeholder="请输入手机号码" style="width:100%;" />
                        </div>
                        <i-button type="primary" @click="sendSubscribe" size="large" long>立即订阅</i-button>
                        <div class="tip">优惠信息将第一时间发送至您手机</div>
                    </div>
                </div>
                <div class="pro-desc">
                    <div class="title">
                        <h3>周边<span>配套</span></h3>
                    </div>
                    <div class="zhoubian">
                        <div class="map-txt">
                            <ul class="map-txt-icon">
                                <li val_class="学校">
                                    <Icon type="ios-school"></Icon>
                                    <span>学校</span>
                                </li>
                                <li val_class="购物">
                                    <Icon type="md-cart"></Icon>
                                    <span>购物</span>
                                </li>
                                <li val_class="餐饮">
                                    <Icon type="ios-restaurant"></Icon>
                                    <span>餐饮</span>
                                </li>
                                <li val_class="银行">
                                    <Icon type="logo-bitcoin"></Icon>
                                    <span>银行</span>
                                </li>
                                <li val_class="公园">
                                    <Icon type="md-walk"></Icon>
                                    <span>公园</span>
                                </li>
                                <li val_class="交通">
                                    <Icon type="md-bus"></Icon>
                                    <span>交通</span>
                                </li>
                            </ul>
                        </div>
                        <div class="map" id="allmap"></div>
                        <input type="hidden" id="map" value="{{$data->map}}">
                    </div>
                </div>
                @include('home.housecal')
            </div>
        </div>
    </div>
    <input type="hidden" id="d_type" value="new">
    <input type="hidden" id="property" value="{{$data->id}},{{$data->title}}">
    @include('home.viewForm')

</div>

@include('home.footer')
@endsection

@section('script')
    <style>
        .qr .qr-menu .menu a.menu_1{color:#f90;border-bottom:2px solid #f90}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2pOLT55iaTI8LVvPfirAgUDqaZa0sdnj"></script>
    <script src="{{asset('static/home/js/jquery.sliderPro.min.js')}}"></script>
    <script src="{{asset('static/home/js/detail.js')}}"></script>
    <script>
        var lngLat = document.getElementById("map").value.split(',')
        var map;
        var bounds;
        var circle;
        var local;
        var lng=lngLat[0];
        var lat=lngLat[1];//指定位置的经度纬度可以到百度定位拾取系统去拿 http://api.map.baidu.com/lbsapi/getpoint/index.html
        var search= '学校';
        var MyMarker;
        // 百度地图API功能
        $(function(){
            map = new BMap.Map("allmap");
            GetLocation();
            var mPoint = new BMap.Point(lng,lat);
            var MyIcon = new BMap.Icon("/images/tip.png", new BMap.Size(26,28));
            MyMarker = new BMap.Marker(mPoint,{icon:MyIcon});
            MyMarker.setAnimation(BMAP_ANIMATION_BOUNCE);
            map.enableScrollWheelZoom();
            map.centerAndZoom(mPoint,15);
            map.addOverlay(MyMarker);

            $('.map-txt-icon li').each(function(index) {
                $(this).click(function(){
                    $(this).parents('.map-txt-icon').find('.tuijian_in').removeClass('tuijian_in');
                    $(this).addClass("tuijian_in");
                    search = $(this).attr('val_class');
                    Search(search,mPoint);
                });
            });
            Search(search,mPoint);

        });

        /**
         * 得到圆的内接正方形bounds
         * @param {Point} centerPoi 圆形范围的圆心
         * @param {Number} r 圆形范围的半径
         * @return 无返回值
         */
        function getSquareBounds(centerPoi,r){
            var a = Math.sqrt(2) * r; //正方形边长
            var mPoi = getMecator(centerPoi);
            var x0 = mPoi.x, y0 = mPoi.y;
            var x1 = x0 + a / 2 , y1 = y0 + a / 2;//东北点
            var x2 = x0 - a / 2 , y2 = y0 - a / 2;//西南点
            var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2, y2));
            return new BMap.Bounds(sw, ne);
        };
        //根据球面坐标获得平面坐标。
        function getMecator(poi){
            return map.getMapType().getProjection().lngLatToPoint(poi);
        };
        //根据平面坐标获得球面坐标。
        function getPoi(mecator){
            return map.getMapType().getProjection().pointToLngLat(mecator);
        };

        function Search(search,mPoint){
            map.clearOverlays();
            circle = new BMap.Circle(mPoint,1000,{stroke:"white",strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
            map.addOverlay(circle);
            local =  new BMap.LocalSearch(map, {renderOptions: {map: map, autoViewport: false}});
            bounds = getSquareBounds(circle.getCenter(),circle.getRadius());
            local.searchInBounds(search,bounds);
            map.addOverlay(MyMarker);
        };

        function GetLocation(){
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(r){
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        lng = r.point.lng;
                        lat = r.point.lat;
                    }else{
                        alert('failed'+this.getStatus());
                    }
                },{enableHighAccuracy: true}
            );
        };
    </script>
@endsection